<!--
 * @Description: 
 * @Autor: 商晓彬
 * @Date: 2021-08-19 11:33:09
 * @LastEditors: 商晓彬
 * @LastEditTime: 2022-02-16 14:47:51
-->
<div class="analysis">
    <div class="m-subheader">
        <div class="row align-items-center">
            <div class="mr-auto col-auto">
                <h3 class="m-subheader__title m-subheader__title--separator">
                    <span>芯级配套对比</span>
                </h3>
            </div>
        </div>
    </div>
    <div class="m-content">
        <div class="m-portlet m-portlet--mobile">
            <div class="m-portlet__body">
                <div class="p-formgroup-inline">
                    <span class="p-field">
                        <span class="input-lable" style="margin-right: 20px;margin-left: 20px;">*型号：</span>
                        <p-dropdown (onChange)="getLotNo($event)" filter="true" name="model" [options]="modelOptions" [(ngModel)]="model" 
                            emptyFilterMessage="暂无数据">
                            <ng-template let-item pTemplate="selectedItem">
                                <span *ngIf="model != undefind "
                                    style="vertical-align:middle; margin-left: .5em;width: 247px;">{{item.label}}</span>
                                <span *ngIf="model == undefind "
                                    style="vertical-align:middle; margin-left: .5em;width: 247px;"> </span>
                            </ng-template>
                            <ng-template let-model pTemplate="item">
                                <div class="ui-helper-clearfix" style="position: relative;height: 25px;">
                                    <div style="font-size:14px;float:right;margin-top:4px;width: 247px;">{{model.label}}
                                    </div>
                                </div>
                            </ng-template>
                        </p-dropdown>
                    </span>
                    <span class="p-field">
                        <span class="input-lable" style="margin-right: 20px;margin-left: 20px;">*发次：</span>
                        <p-dropdown (onChange)="onChange($event)" filter="true" name="sendTime" [options]="sendTimeOptions" [(ngModel)]="sendTime" 
                            emptyFilterMessage="暂无数据">
                            <ng-template let-item pTemplate="selectedItem">
                                <span *ngIf="sendTime != undefind "
                                    style="vertical-align:middle; margin-left: .5em;width: 247px;">{{item.label}}</span>
                                <span *ngIf="sendTime == undefind "
                                    style="vertical-align:middle; margin-left: .5em;width: 247px;"> </span>
                            </ng-template>
                            <ng-template let-model pTemplate="item">
                                <div class="ui-helper-clearfix" style="position: relative;height: 25px;">
                                    <div style="font-size:14px;float:right;margin-top:4px;width: 247px;">{{model.label}}
                                    </div>
                                </div>
                            </ng-template>
                        </p-dropdown>
                    </span>
                    <span class="p-field">
                        <span class="input-lable" style="margin-right: 20px;margin-left: 20px;">*芯级：</span>
                        <p-dropdown filter="true" name="xj" [options]="xjOptions" [(ngModel)]="xj" 
                            emptyFilterMessage="暂无数据">
                            <ng-template let-item pTemplate="selectedItem">
                                <span *ngIf="xj != undefind "
                                    style="vertical-align:middle; margin-left: .5em;width: 247px;">{{item.label}}</span>
                                <span *ngIf="xj == undefind "
                                    style="vertical-align:middle; margin-left: .5em;width: 247px;"> </span>
                            </ng-template>
                            <ng-template let-model pTemplate="item">
                                <div class="ui-helper-clearfix" style="position: relative;height: 25px;">
                                    <div style="font-size:14px;float:right;margin-top:4px;width: 247px;">{{model.label}}
                                    </div>
                                </div>
                            </ng-template>
                        </p-dropdown>
                    </span>
                    <!-- <span class="p-field">
                        <span class="input-lable" style="margin-right: 20px;margin-left: 20px;">制造BOM版本：</span>
                        <p-dropdown name="bomVersion" [options]="bomVersionOptions" [(ngModel)]="bomVersion" 
                            emptyFilterMessage="暂无数据">
                            <ng-template let-item pTemplate="selectedItem">
                                <span *ngIf="bomVersion != undefind "
                                    style="vertical-align:middle; margin-left: .5em;width: 247px;">{{item.label}}</span>
                                <span *ngIf="bomVersion == undefind "
                                    style="vertical-align:middle; margin-left: .5em;width: 247px;"> </span>
                            </ng-template>
                            <ng-template let-model pTemplate="item">
                                <div class="ui-helper-clearfix" style="position: relative;height: 25px;">
                                    <div style="font-size:14px;float:right;margin-top:4px;width: 247px;">{{model.label}}
                                    </div>
                                </div>
                            </ng-template>
                        </p-dropdown>
                    </span> -->
                    <!-- <span class="p-field">
                        <span class="ml input-lable" style="margin-right: 20px;">设计BOM版本：</span>
                        <input disabled style=" width:200px;height: 35px;" id="makeBomVersion" name="makeBomVersion" type="text" [(ngModel)]="makeBomVersion" />
                    </span> -->
                    <p-button label="查询" (onClick)="getTableList()" style="margin-left: 100px;"></p-button>
                    <p-button label="重置" (onClick)="reset()" class="ml"></p-button>
                    <p-button *ngIf="'Pages.CoreComparison.Export' | permission" label="导出" (onClick)="export()" class="ml"></p-button>
                </div>
                <div class="row align-items-center" style="margin-top: 25px;">
                    <div class="primeng-datatable-container">
                        <p-table #dataTable [value]="primengTableHelper.records" (onLazyLoad)="getTableList($event)"
                            rows="{{primengTableHelper.defaultRecordsCountPerPage}}" [paginator]="false" [lazy]="true"
                            [scrollable]="true" ScrollWidth="100%" [responsive]="primengTableHelper.isResponsive"
                            [resizableColumns]="primengTableHelper.resizableColumns">
                            <ng-template pTemplate="header" >
                                <tr>
                                    <th style="width: 80px;">序号</th>
                                    <th style="width: 150px">物料图号</th>
                                    <th style="width: 150px">物料名称</th>
                                    <th style="width: 150px">规格型号</th>
                                    <th style="width: 150px">物料属性</th>
                                    <th style="width: 150px">物料类别</th>
                                    <th style="width: 150px">单位</th>
                                    <th style="width: 150px">设计BOM用量</th>
                                    <th style="width: 150px">制造BOM用量</th>
                                    <th style="width: 150px">对比差异</th>
                                </tr>
                            </ng-template>
                            <ng-template pTemplate="body" let-record="$implicit" let-rowIndex="rowIndex">
                                <tr>
                                    <td style="width: 80px;">{{rowIndex+1}}</td>
                                    <td style="width: 150px">{{record.materialNo}}</td>
                                    <td style="width: 150px">{{record.materialName}}</td>
                                    <td style="width: 150px">{{record.model}}</td>
                                    <td style="width: 150px">{{record.materialProperty}}</td>
                                    <td style="width: 150px">{{record.materialTypeName}}</td>
                                    <td style="width: 150px">{{record.unit}}</td>
                                    <td style="width: 150px">{{record.unit1BomDosage}}</td>
                                    <td style="width: 150px">{{record.unit1BomMake}}</td>
                                    <td style="width: 150px">{{record.difference}}</td>
                                </tr>
                            </ng-template>
                        </p-table>
                        <div class="primeng-paging-container">
                            <p-paginator [rows]="primengTableHelper.defaultRecordsCountPerPage" #paginator
                                (onPageChange)="getTableList($event)"
                                [totalRecords]="primengTableHelper.totalRecordsCount"
                                [rowsPerPageOptions]="primengTableHelper.predefinedRecordsCountPerPage">
                            </p-paginator>
                            <span class="total-records-count">
                                {{'TotalRecordsCount' | localize:primengTableHelper.totalRecordsCount}}
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>